Vue Js Get Maximum Value: Vue.js makes it simple to find the maximum value in an array. The Math.max() function takes two or more numbers as arguments and returns the maximum of these numbers. Here in these tutorials, we will learn how to find the maximum value from an array or an array of objects with the help of Vue.js and native JavaScript.
Find the maximum element of an array in Vue Js?
In Vue.js, to obtain an array’s maximum value, the maximum element of an array can be found using the Math.max() method.
Vue Js Max Value of Array | Example
<div id="app">
<button @click="getMaxValue">click me</button>
<p>{{maxValue}}</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
demoArray: [23, 45, 78, 12, 45],
maxValue: ''
}
},
methods: {
getMaxValue() {
this.maxValue = Math.max.apply(Math, this.demoArray)
}
}
}).mount("#app");
</script>
Output of above example
You can also use spread syntax to find the maximum value of an array. By using spread syntax, you can compare all of the elements in an array and find the maximum value
Vue Js Get Maxium Value using Spread operator| Example
Vue Js Get Maxium Value using Spread operator| Example
How to find the greatest value of a property in an array object?
The greatest value of a property in an array object can be found using the Math.max() method, which takes an array as its argument. The iterator property of an array object that can be used to loop through a collection returns the largest element within it
Vue Js Max Value Array Object | Example
<div id="app">
<button @click="getMaxValue">click me</button>
<p>{{maxPrice}}</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
arrayObj: [
{ fruit: 'Apple', price: 100 },
{ fruit: 'Mango', price: 50 },
{ fruit: 'Orange', price: 70 },
{ fruit: 'Pineapple', price: 120 },
{ fruit: 'Banana', price: 20 },
],
maxPrice: ''
}
},
methods: {
getMaxValue() {
this.maxPrice = Math.max(...this.arrayObj.map(property => property.price))
}
}
}).mount("#app");
</script>
Output of above exmple
